<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // async 函数
    // ES2017 标准引入了 async 函数，使得异步操作变得更加方便。

    // async 函数是什么？一句话，它就是Promise 和 Generator 函数的语法糖。


    // 如何创建async函数?  => 在函数加关键词 async

    // 普通函数
    // function fn() {
    //     return 1;
    // }
    // var res = fn();
    // console.log(res);

    // async函数   => Promise和 Generator 函数的语法糖, 如果函数执行完毕, 返回fulfilled状态的Promise实例,函数的返回值会作为Promise实例数据存储,如果函数执行过程中出错, 内部会被try...catch捕获, 返回rejected状态的Promise实例,错误的对象(err)会作为Promise实例数据存储
    /* async function fn() {
        return 1;   //  {<fulfilled>:1}

        // var err = new Error("xxx");
        // throw err;
        // aaaa
    }
    var res = fn();
    // console.log(res);

    res.then(arg=>{
        console.log("fulfilled",arg);
    }).catch(err=>{
        console.log("rejected",err);
    }) */



    // Promise的链式写法(旧)
    /*  var p = getNumAsync(1,2000);// {<pending>:undef} 2s后变为{<fulfilled>:1}

    // p(pending)  => 2s (fulfilled:1)
    p.then(function(arg){ // 1
        console.log("fulfilled",arg);
        return getNumAsync(2,2000); // 返回Promise实例  2s后变为{<fulfilled>:2}
    }).then(function(arg){ // 2
        console.log("fulfilled",arg);
        return getNumAsync(3,2000); // 返回Promise实例  2s后变为{<fulfilled>:3};
    }).then(function(arg){ // 3
        console.log("fulfilled",arg);
        return getNumAsync(4,2000); // 返回Promise实例  2s后变为{<fulfilled>:4};
    }).then(function(arg){ // 4
        console.log("fulfilled",arg);
    }).catch(function(arg){
        console.log("rejected",arg);
    })*/

    // async函数，怎么得异步操作变得更加方便。
    // async函数中 有一个关键词await, 等Promise实例的状态改变之后,在执行后续代码 (等异步操作(Promise封装的)有结果之后,代码在向后执行)
    // 注意: await关键词只能在async函数 / 模块化语法中使用, 如果没有异步函数,可以自己添加一个

    async function fn() {
        var p1 = await getNumAsync(1, 2000);  // Promise实例 2s => {<fulfilled>:1}  
        console.log(p1);
        var p2 = await getNumAsync(2, 1000);  // Promise实例 1s => {<fulfilled>:2}
        console.log(p2);
        var p3 = await getNumAsync(3, 3000);  // Promise实例 3s => {<fulfilled>:3}
        console.log(p3);
        var sum = p1 + p2 + p3
        return sum;
    }

    var res = fn();
    console.log(res); // {<pending>:undefined}

    res.then(arg=>{
        console.log("fulfilled",arg);
    }).catch(err=>{
        console.log("rejected",err);
    })





    function getNumAsync(num, delay = 0, isFulfilled = true) {
        var p = new Promise(function (resolve, reject) {
            // 回调函数 -> 容器 -> 用来存放异步操作 (根据异步操作的结果改变状态)
            setTimeout(() => {
                isFulfilled ? resolve(num) : reject(num); // {<fulfilled>:1}
                // console.log(p);
            }, delay);
        })
        return p;  // {<pending>:undefined}
    }


</script>

</html>